<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="menus-modal"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 快捷菜单设置
  .modal-content
    .modal-content-title 最多支持设置5个快捷菜单
    .modal-content-bd
      .menus-row-left
        .menus-row-title 列名
        .menus-row-bd
          .menu-item(v-for="row in menuList")
            .menu-item-title(v-if="row.title") {{row.title}}
            el-checkbox-group(v-model="menusGroup", :max="6" @change="changeGroup")
              .menu-item-bd
                .menu-child-item(v-for="col in row.items")
                  el-checkbox(:label="col.value", :key="col.value", :disabled="col.isDisable")
      .menus-row-right
        .menus-row-title
          span 已选
          label （可拖动调整顺序）
        .menus-row-bd
          draggable(:list="selectMenus", v-bind="dragOptions" @end="draggableEnd", :move="onMove")
            transition-group(type="transition" name="flip-list" tag="div")
              .menus-select-item(v-for="item, index in selectMenus", :key="index", :class="{ 'disabled': item.isDisable }")
                .menus-select-item-hd
                  .iconfont.icon-move(v-if="!item.isDisable")
                .menus-select-item-value(:class="{ 'disabled': item.isDisable }") {{item.value}}
                .menus-select-item-ft(v-if="!item.isDisable" @click="delMenusItem(item, index)")
                  .iconfont.el-icon-close
  .modal-footer(slot="footer")
    .modal-footer-default(@click="restoreDefault") 恢复默认
    .modal-footer-handles
      el-button(size="small" @click="handleClose") 取消
      el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import draggable from 'vuedraggable'
import navbars from '@/utils/navbars'
import { saveQuickMenu } from 'api'
export default {
  name: 'menusSelectModal',
  props: {
    show: Boolean,
    activeMenus: Array
  },
  components: {
    draggable
  },
  data () {
    return {
      menuList: [],
      menusGroup:[],
      defaultGroup: ['信息公告', '设计师用户', '品牌库', '材料列表', '材料审核', '案例列表'],
      selectMenus: [{ value: '信息公告', isDisable: true }],
      defaultMenus: [
        { value: '信息公告', isDisable: true },
        { value: '设计师用户' },
        { value: '品牌库' },
        { value: '材料列表' },
        { value: '材料审核' },
        { value: '案例列表' },
      ]
    }
  },
  computed: {
    dragOptions () {
      return {
        animation: 60,
        filter: '.disabled',
        handle: '.menus-select-item'
      }
    },
    menus: {
      get () {
        let menus = []
        this.menusGroup.forEach(row => {
          this.menuList.forEach(col => {
            col.items.forEach(item => {
              if (row === item.value) {
                menus.push(item)
              }
            })
          })
        })
        return menus
      }
    }
  },
  methods: {
    beforeOpen () {
      this.menuList = navbars
      this.menusGroup = this.activeMenus
      this.setSelectMenu()
    },
    restoreDefault () {
      this.menusGroup = this.defaultGroup
      this.setSelectMenu()
    },
    setSelectMenu () {
      let menus = []
      this.menusGroup.forEach(item => {
        this.menuList.forEach(row => {
          let newRow = row.items.filter(col => col.value === item)
          menus.push(...newRow)
        })
      })
      this.selectMenus = menus
    },
    changeGroup () {
      this.setSelectMenu()
    },
    onMove (e) {
      if (e.relatedContext.element.value === '信息公告') return false
      else return true
    },
    handleClose () {
      this.$emit('close')
    },
    async confirm () {
      try {
        await this.$axios.post(saveQuickMenu, { data: JSON.stringify(this.menus) })
        this.$emit('confirm', this.menus)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    draggableEnd (e) {},
    delMenusItem (item, itemIndex) {
      let index = this.menusGroup.findIndex(row => item.value === row)
      this.menusGroup.splice(index, 1)
      this.selectMenus.splice(itemIndex, 1)
    }
  },
  created () {}
} 
</script>

<style type="text/css" lang="scss">
.menus-modal {
  .el-dialog__header {
    padding: 24px 32px;
    border-bottom: 1px solid #EDEDED;
  }
  .el-dialog__headerbtn {
    font-size: 24px;
    color: #B2B4C7;
  }
  .el-dialog__body {
    padding: 0;
  }
  .el-dialog__footer {
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
.modal-content {
  padding: 8px 4px 8px 28px;
}
.modal-content-title {
  padding-left: 4px;
  font-size: 12px;
  line-height: 24px;
  color: #8B8EAB;
}
.modal-content-bd {
  display: flex;
  margin-top: 8px;
}
.menus-row-left,
.menus-row-right {
  margin: 0 4px;
}
.menus-row-left {
  flex: 1;
}
.menus-row-right {
  width: 208px;
}
.menus-row-title {
  padding: 8px;
  font-size: 14px;
  line-height: 22px;
  color: #64698F;
  border: 1px solid #EDEDED;
  border-radius: 4px 4px 0 0;
  label {
    color: #B2B4C7;
  }
}
.menus-row-bd {
  width: 100%;
  height: 454px;
  max-height: 454px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #EDEDED;
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-top: 1px solid #EDEDED;
  .modal-footer-default {
    font-size: 14px;
    line-height: 22px;
    color: #3E4373;
    cursor: pointer;
  }
}
.modal-footer-handles {
  display: flex;
  align-items: center;
}
.menu-item {
  margin-bottom: 24px;
}
.menu-item-title {
  font-weight: bold;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 8px;
  color: #3E4373;
}
.menu-item-bd {
  display: flex;
  flex-wrap: wrap;
}
.menu-child-item {
  width: 50%;
  margin-bottom: 8px;
}
.menus-select-item {
  margin-bottom: 8px;
  padding: 8px;
  background: #F6F6F9;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.menus-select-item-hd {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #3E4373;
  display: flex;
  align-items: center;
}
.menus-select-item-value {
  flex: 1;
  margin-left: 4px;
  font-size: 14px;
  line-height: 22px;
  color: #3E4373;
  &.disabled {
    color: #8B8EAB;
  }
}
.menus-select-item-ft {
  font-size: 16px;
  color: #B2B4C7;
}
</style>
